import React from 'react';
import { View } from 'react-native-ui-lib';
import { TouchableOpacity } from 'react-native';
import { AIAvatar } from './AIAvatar';
import { VoiceOverlay } from './VoiceOverlay';
import { useAIStore } from '../store/ai';

export const AIAvatarPortal = () => {
  const { status, audioLevel, handleLongPress, handlePressOut, stopAudio } = useAIStore();

  const handlePress = () => {
    if (status === 'speaking') {
      stopAudio();
    }
  };

  const handleLongPressWithStop = async () => {
    if (status === 'speaking') {
      await stopAudio();
    }
    handleLongPress();
  };

  return (
    <>
      <VoiceOverlay />
      <View
        style={{
          position: 'absolute',
          left: 24,
          bottom: 24,
          zIndex: 1001,
          elevation: 1001,
          justifyContent: 'flex-end',
          alignItems: 'flex-start',
          backgroundColor: 'transparent',
          pointerEvents: 'box-none',
        }}
      >
        <TouchableOpacity
          onPress={handlePress}
          onLongPress={handleLongPressWithStop}
          onPressOut={handlePressOut}
          delayLongPress={200}
          activeOpacity={0.7}
          style={{
            width: 60,
            height: 60,
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: "transparent",
          }}
        >
          <AIAvatar
            status={status}
            audioLevel={audioLevel}
          />
        </TouchableOpacity>
      </View>
    </>
  );
}; 